<template>
  <div class="app-container home">
    <!-- 头部横幅 -->
    <div class="header-banner">
      <div class="header-content">
        <img src="@/assets/logo/logo.png" alt="华为坊标志" class="logo" />
        <h1>厦门工学院华为坊管理系统</h1>
        <p class="subtitle">专业、高效的校园信息化管理平台</p>
      </div>
    </div>

    <!-- 系统介绍 -->
    <el-row :gutter="20" class="section">
      <el-col :xs="24" :lg="12">
        <div class="intro-section">
          <h2 class="section-title"><i class="el-icon-info"></i> 系统简介</h2>
          <p class="intro-text">
            厦门工学院华为坊管理系统是专为学院华为坊打造的一站式信息化管理平台。系统集成了人才培养、项目管理、资源分配、活动组织等核心功能，
            旨在提升华为坊的管理效率和服务质量，为学生提供更好的学习和实践环境。
          </p>
          <div class="features">
            <el-row :gutter="10">
              <el-col :xs="12" :sm="6" class="feature-item">
                <div class="feature-card">
                  <i class="el-icon-connection"></i>
                  <span>智能管理</span>
                </div>
              </el-col>
              <el-col :xs="12" :sm="6" class="feature-item">
                <div class="feature-card">
                  <i class="el-icon-shield"></i>
                  <span>安全可靠</span>
                </div>
              </el-col>
              <el-col :xs="12" :sm="6" class="feature-item">
                <div class="feature-card">
                  <i class="el-icon-s-promotion"></i>
                  <span>高效便捷</span>
                </div>
              </el-col>
              <el-col :xs="12" :sm="6" class="feature-item">
                <div class="feature-card">
                  <i class="el-icon-mobile-phone"></i>
                  <span>移动兼容</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :lg="12">
        <div class="tech-stack">
          <h2 class="section-title"><i class="el-icon-laptop"></i> 技术栈</h2>
          <el-row :gutter="20">
            <el-col :xs="12">
              <h4>后端技术</h4>
              <ul class="tech-list">
                <li><i class="el-icon-check"></i> SpringBoot</li>
                <li><i class="el-icon-check"></i> Spring Security</li>
                <li><i class="el-icon-check"></i> MyBatis</li>
                <li><i class="el-icon-check"></i> Redis</li>
                <li><i class="el-icon-check"></i> MySQL</li>
              </ul>
            </el-col>
            <el-col :xs="12">
              <h4>前端技术</h4>
              <ul class="tech-list">
                <li><i class="el-icon-check"></i> Vue.js</li>
                <li><i class="el-icon-check"></i> Element UI</li>
                <li><i class="el-icon-check"></i> Vuex</li>
                <li><i class="el-icon-check"></i> Vue Router</li>
                <li><i class="el-icon-check"></i> Axios</li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!-- 功能模块 -->
    <el-row :gutter="20" class="section">
      <el-col :span="24">
        <h2 class="section-title"><i class="el-icon-menu"></i> 核心功能模块</h2>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" v-for="(module, index) in modules" :key="index">
        <el-card class="module-card" shadow="hover">
          <div class="module-header">
            <i :class="module.icon"></i>
            <h3>{{ module.title }}</h3>
          </div>
          <div class="module-content">
            <p>{{ module.description }}</p>
            <el-button type="primary" size="small" plain @click="goToModule(module.route)">
              查看详情
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据统计 -->
    <el-row :gutter="20" class="section">
      <el-col :span="24">
        <h2 class="section-title"><i class="el-icon-data-line"></i> 系统概览</h2>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6" v-for="(stat, index) in statistics" :key="index">
        <div class="stat-card">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <i :class="stat.icon"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 联系信息 -->
    <el-row :gutter="20" class="section contact-section">
      <el-col :xs="24" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <h3><i class="el-icon-s-promotion"></i> 学院简介</h3>
          </div>
          <div class="card-content">
            <p>厦门工学院华为坊致力于培养高质量的信息技术人才，
              通过产教融合的方式，为学生提供实践平台和就业机会。</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <h3><i class="el-icon-chat-dot-round"></i> 联系我们</h3>
          </div>
          <div class="card-content">
            <p><i class="el-icon-location"></i> 地址：福建省厦门市集美区孙坂南路1251号</p>
            <p><i class="el-icon-phone"></i> 电话：0592-6666666</p>
            <p><i class="el-icon-message"></i> 邮箱：huaweifang@xmut.edu.cn</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="8">
        <el-card class="info-card">
          <div slot="header" class="card-header">
            <h3><i class="el-icon-timer"></i> 开放时间</h3>
          </div>
          <div class="card-content">
            <p>周一至周五：08:00 - 22:00</p>
            <p>周六至周日：09:00 - 20:00</p>
            <p>节假日请关注通知公告</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2024 厦门工学院华为坊管理系统 - 版权所有</p>
        <p>版本号：v1.0.0</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      version: '1.0.0',
      modules: [
        {
          title: '人才培养',
          description: '管理学生信息、课程安排、技能培训和考核评价',
          icon: 'el-icon-user',
          route: '/talent'
        },
        {
          title: '项目管理',
          description: '项目申报、审批、进度跟踪和成果展示',
          icon: 'el-icon-document',
          route: '/project'
        },
        {
          title: '资源管理',
          description: '实验室预约、设备管理、图书资料和软件资源',
          icon: 'el-icon-s-operation',
          route: '/resource'
        },
        {
          title: '活动组织',
          description: '讲座、比赛、培训等活动的发布和管理',
          icon: 'el-icon-date',
          route: '/activity'
        }
      ],
      statistics: [
        {
          label: '在校学生',
          value: '1,200+',
          icon: 'el-icon-user-solid',
          color: '#409EFF'
        },
        {
          label: '合作企业',
          value: '50+',
          icon: 'el-icon-office-building',
          color: '#67C23A'
        },
        {
          label: '项目数量',
          value: '200+',
          icon: 'el-icon-document-copy',
          color: '#E6A23C'
        },
        {
          label: '就业率',
          value: '98%',
          icon: 'el-icon-finished',
          color: '#F56C6C'
        }
      ]
    }
  },
  methods: {
    goToModule(route) {
      this.$router.push(route)
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部横幅样式 */
.header-banner {
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: white;
  padding: 10px;
}

.header-content h1 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 600;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
}

/* 通用区块样式 */
.section {
  padding: 40px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  font-size: 24px;
  color: #303133;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 600;
}

.section-title i {
  margin-right: 10px;
  color: #1976d2;
}

/* 介绍区块样式 */
.intro-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.intro-text {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  margin-bottom: 30px;
}

.features {
  margin-top: 20px;
}

.feature-item {
  margin-bottom: 15px;
}

.feature-card {
  text-align: center;
  padding: 20px;
  background-color: #f0f8ff;
  border-radius: 8px;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

.feature-card i {
  font-size: 32px;
  color: #1976d2;
  margin-bottom: 10px;
}

.feature-card span {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

/* 技术栈样式 */
.tech-stack {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.tech-stack h4 {
  font-size: 18px;
  color: #303133;
  margin-bottom: 15px;
}

.tech-list {
  list-style: none;
  padding: 0;
}

.tech-list li {
  margin-bottom: 10px;
  color: #606266;
  font-size: 14px;
}

.tech-list i {
  color: #67c23a;
  margin-right: 8px;
}

/* 功能模块样式 */
.module-card {
  height: 100%;
  transition: all 0.3s;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.module-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.module-header {
  background-color: #f0f8ff;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.module-header i {
  font-size: 24px;
  color: #1976d2;
  margin-right: 10px;
}

.module-header h3 {
  font-size: 18px;
  color: #303133;
  display: inline-block;
  margin: 0;
}

.module-content {
  padding: 20px;
}

.module-content p {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 数据统计样式 */
.stat-card {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.stat-icon i {
  font-size: 32px;
  color: white;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  font-size: 16px;
  color: #606266;
  margin-top: 5px;
}

/* 联系信息样式 */
.contact-section {
  background-color: white;
  margin: 40px auto;
  padding: 40px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  max-width: 1200px;
}

.info-card {
  height: 100%;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
}

.card-header h3 {
  font-size: 18px;
  color: #303133;
  margin: 0;
  display: inline-block;
}

.card-header i {
  color: #1976d2;
  margin-right: 8px;
}

.card-content {
  padding: 10px 0;
}

.card-content p {
  color: #606266;
  margin-bottom: 12px;
  line-height: 1.6;
}

.card-content i {
  color: #1976d2;
  margin-right: 8px;
}

/* 页脚样式 */
.footer {
  background-color: #1976d2;
  color: white;
  padding: 20px 0;
  text-align: center;
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer p {
  margin: 5px 0;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .section {
    padding: 30px 20px;
  }

  .intro-section,
  .tech-stack {
    margin-bottom: 20px;
  }

  .stat-number {
    font-size: 28px;
  }
}
</style>
